﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".file").change(function () {
                var fileImg = $(".fileImg");
                var explorer = navigator.userAgent;
                var imgSrc = $(this)[0].value;
                if (explorer.indexOf('MSIE') >= 0) {
                    if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
                        imgSrc = "";
                        fileImg.attr("src", "/img/default.png");
                        return false;
                    } else {
                        fileImg.attr("src", imgSrc);
                    }
                } else {
                    if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
                        imgSrc = "";
                        fileImg.attr("src", "/img/default.png");
                        return false;
                    } else {
                        var file = $(this)[0].files[0];
                        var url = URL.createObjectURL(file);
                        fileImg.attr("src", url);
                    }
                }
                $("#file_up_label").hide();
                $(".preview").show();
                $(".close").on('click', function () {
                    $(".preview").hide();
                    $("#file_up_label").show();
                })
            })
        })
    </script>
</head>

<body>
<form enctype="multipart/form-date" method="post">
    <input type="file" class="file" id="file_up_input">
    <label for="file_up_input" id="file_up_label">
        <img src="./img/up.png" alt="">
    </label>
    <!--<input type="submit" class="sub">-->
    <div class="preview">
        <img src="./img/close.png" alt="" class="close">
        <img src="./img/up.png" class="fileImg">
    </div>
</form>
</body>
<style>
    form {
        /*float: left;*/
    }

    .close {

        position: absolute;
        top: -10px;
        right: -10px
    }

    .preview {
        position: relative;
        float: left;
        display: none;
    }

    #file_up_label > img {
        width: 200px;
        height: 200px;
    }

    .fileImg {
        width: 200px;
        height: 200px;
    }

    #file_up_input {
        width: 0;
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    }
</style>

</html>